import React, { Component } from 'react'
import './Index.scss'
import SearchInput from '../searchInput/SearchInput'
import Swiper from './swiper/Swiper'
import Imgs from '../../assets/images/index-top.png'
import NavList from '../navList/NavList'
import Falls from './falls/Falls'
export default class Index extends Component {
    state={
        swiperList:[]
    }
    //跳转下载页
    goApp=() => {
        this.props.history.push('/download')
    }
    render() {
        return (
            <div className='mgj-index'>
                {/* 通知栏开始 */}
                <div className='index-annunciate'>
                    <div className='annunciate-left'>
                        <img src={Imgs} alt=''></img>
                        <div className='annunciate-text'>
                            <p className='text1'>蘑菇街 总有高手帮你挑</p>
                            <div className='text2'>
                                <i className='iconfont icon-xingxing'></i>
                                <i className='iconfont icon-xingxing'></i>
                                <i className='iconfont icon-xingxing'></i>
                                <i className='iconfont icon-xingxing'></i>
                                <i className='iconfont icon-xingxing'></i>
                                <span >超过2亿用户已下载</span>
                            </div>
                        </div>
                    </div>
                    <div className='annunciate-right' onClick={this.goApp}>打开APP</div>
                </div>
                {/* 通知栏结束 */}
                {/* 搜索栏开始 */}
                <SearchInput/>
                {/* 搜索栏结束 */}
                {/* 轮播图开始 */}
                <div className='mgj-swiper'>
                    <Swiper/>
                </div>
                {/* 轮播图结束 */}
                {/* 导航栏开始 */}
                <div className='mgj-nav'>
                    <NavList/>
                </div>
                {/* 导航栏结束 */}
                {/* 用户展示开始 */}
                <div className='mgj-falls'>
                    <Falls/>
                </div>
                {/* 用户展示结束 */}
            </div>
        )
    }
}
